<template>
  <h2>Style 默认样式说明</h2>
  <h3>纯色</h3>
  <p>import { pureColor } from 'ui-lib/components-mobile/m-chart/style'</p>
  <ColorBar type="pure" :colors="pureColor"></ColorBar>
  <h3>渐变色</h3>
  <p>import { gradientColor } from 'ui-lib/components-mobile/m-chart/style'</p>
  <ColorBar type="gradient" :colors="gradientColor"></ColorBar>
  <h3>Grid 网格</h3>
  <table-info type="config" :data="grid"></table-info>
  <h3>Axis</h3>
  <table-info type="config" :data="axis"></table-info>
  <h3>xAxis</h3>
  <table-info type="config" :data="xAxis"></table-info>
  <h3>yAxis</h3>
  <table-info type="config" :data="yAxis"></table-info>
  <h3>Name 轴名称</h3>
  <table-info type="config" :data="name"></table-info>
  <h3>Bar 柱状图</h3>
  <table-info type="config" :data="bar"></table-info>
  <!-- <h3>Legend 图例</h3>
  <table-info type="config" :data="legend"></table-info> -->
  <!-- <h3>Line 折线图</h3>
  <table-info type="config" :data="line"></table-info> -->
  <!-- <h3>Ring 环形图</h3>
  <table-info type="config" :data="ring"></table-info> -->
</template>

<script setup>
import ColorBar from './color-bar.vue'
import { pureColor, gradientColor } from 'ui-lib/components/chart/style'

const grid = [
  { name: 'gridContainLabel', desc: '绘图网格是否包含坐标系标签', type: 'boolean', value: 'false' },
  { name: 'gridLeft', desc: '绘图网格距离容器左侧的距离', type: 'number', value: '55' },
  { name: 'gridRight', desc: '绘图网格距离容器右侧的距离', type: 'number', value: '30' },
  { name: 'gridTop', desc: '绘图网格距离容器上侧的距离', type: 'number', value: '41' },
  { name: 'gridBottom', desc: '绘图网格距离容器下侧的距离', type: 'number', value: '34' },
]

const axis = [
  { name: 'axisLineColor', desc: '轴线颜色，包括刻度', type: 'string', value: '#616998' },
  { name: 'axisPointerColor', desc: '坐标轴指示器颜色', type: 'string', value: '#999' },
  { name: 'splitLineColor', desc: '分割线颜色', type: 'string', value: '#EFF1F5' },
]

const xAxis = [
  { name: 'xAxisLabelColor', desc: 'x轴文字颜色', type: 'string', value: '#27243F' },
  { name: 'xAxisLabelFontSize', desc: 'x轴文字大小', type: 'number', value: '12' },
  { name: 'xAxisLabelMargin', desc: 'x轴文字距离刻度的距离', type: 'number', value: '5' },
]
const yAxis = [
  { name: 'yAxisLabelColor', desc: 'y轴文字颜色', type: 'string', value: '#616998' },
  { name: 'yAxisLabelFontSize', desc: 'y轴文字大小', type: 'number', value: '11' },
  { name: 'yAxisLabelLineHeight', desc: 'y轴文字行高', type: 'number', value: '15' },
  { name: 'yAxisSplitLineType', desc: 'y轴分割线的类型', type: 'string', value: 'dash' },
  { name: 'yAxisSplitLineColor', desc: 'y轴分割线的颜色', type: 'string', value: '#eff1f5' },
  { name: 'yAxisLabelMargin', desc: 'y轴文字距离刻度的距离', type: 'number', value: '10' },
]

const name = [
  { name: 'nameColor', desc: '坐标轴名称的颜色', type: 'string', value: '#27243F' },
  { name: 'nameFontSize', desc: '坐标轴名称的字体大小', type: 'number', value: '11' },
]

// const legend = [
//   { name: 'legendGap', desc: '图例间距', type: 'number', value: '24' },
//   { name: 'legendTop', desc: '图例上边距', type: 'number', value: '0' },
//   { name: 'legendFontSize', desc: '图例的文字大小', type: 'number', value: '14' },
//   { name: 'legendFontColor', desc: '图例的文字颜色', type: 'string', value: '#27243F' },
//   { name: 'legendCircleSize', desc: '圆形图例的直径', type: 'number', value: '14' },
// ]

// const line = [
//   { name: 'lineWidth', desc: '折线图的线条粗细', type: 'number', value: '3' },
//   { name: 'lineCircelSize', desc: '折线图圆形标记的大小', type: 'number', value: '10' },
//   { name: 'lineCircelBorderWidth', desc: '折线图圆形标记的边框粗细', type: 'number', value: '2' },
//   {
//     name: 'lineCircelBorderColor',
//     desc: '折线图圆形标记的边框颜色',
//     type: 'string',
//     value: '#fff',
//   },
// ]

const bar = [
  { name: 'barWidth', desc: '柱状图的柱宽度', type: 'number', value: '11' },
  { name: 'barGap', desc: '柱状图的柱间距，为柱宽度的百分比', type: 'string', value: '18%' },
  { name: 'barBorderRadius', desc: '柱状图的柱圆角', type: 'Array', value: '4' },
]
// const ring = [{ name: 'ringWidth', desc: '环图粗细', type: 'number', value: '22' }]
</script>
